{extend name="common/base" /}
{block name="body"} 
<div class="Content" id="content">
    <div class="container">
        <div class="cashNav">
            <a class="item active" href="/merchant/account_pwd.html">登录密码</a>
            <a class="item" href="/merchant/trade_account_pwd.html">提现账户</a>
        </div>

        <div class="CashPage">
            <div class="content">
                <div class="FormPage">
                    <form class="layui-form" lay-filter="pwdForm">
                        <div class="form-item-inline">
                            <label class="must form-label">当前登录密码：</label>
                            <div class="input-inline">
                                <input type="password" name="old_password" class="layui-input" 
                                    placeholder="请输入当前登录密码" lay-verify="required|password">
                            </div>
                        </div>

                        <div class="form-item-inline">
                            <label class="must form-label">新登录密码：</label>
                            <div class="input-inline">
                                <input type="password" name="new_password" id="newPassword" class="layui-input" 
                                    placeholder="请输入6-20位新密码" lay-verify="required|password">
                                <p class="layui-form-mid layui-word-aux">密码长度6-20位，建议包含字母、数字和符号</p>
                            </div>
                        </div>
                        
                        <div class="form-item-inline">
                            <label class="must form-label">确认新密码：</label>
                            <div class="input-inline">
                                <input type="password" name="confirm_password" class="layui-input" 
                                    placeholder="请再次输入新密码" lay-verify="required|confirmPassword">
                            </div>
                        </div>

                        <div class="form-item-inline">
                            <label class="form-label"></label>
                            <div class="input-inline foot">
                                <button class="layui-btn" lay-submit lay-filter="submitForm">确认修改</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"} 
<script>
    changeTitleName('密码修改');
    
    layui.use(['form', 'layer'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;
        
        // 自定义验证规则
        form.verify({
            password: [
                /^[\S]{6,20}$/,
                '密码必须6到20位，且不能出现空格'
            ],
            confirmPassword: function(value) {
                if(value !== $('#newPassword').val()) {
                    return '两次输入的密码不一致';
                }
            }
        });
        
        // 表单提交
        form.on('submit(submitForm)', function(data){
            var loading = layer.load(2); // 显示加载中
            
            $.ajax({
                url: '/merchant/update_login_pwd',
                type: 'POST',
                dataType: 'json',
                data: data.field,
                success: function(res){
                    layer.close(loading);
                    if(res.code == 200){
                        layer.msg('密码修改成功', {icon: 1});
                        // 清空表单
                        $('input[type="password"]').val('');
                        form.render();
                    }else{
                        layer.msg(res.msg || '密码修改失败', {icon: 2});
                    }
                },
                error: function(){
                    layer.close(loading);
                    layer.msg('网络错误，请稍后再试', {icon: 2});
                }
            });
            
            return false; // 阻止表单跳转
        });
    });
</script>
{/block}